<template>
  <transition name="scale" duration="320">
    <div class="dialog-container"
         v-if="modelValue"
    >
      <div class="mask"></div>
      <div class="container">
        <svg-icon icon="close"
                  class-name="icon"
                  @click.stop.prevent="handClick"
        />
        <div class="header">
          <span class="title" v-if="title">{{ title }}</span>
          <slot name="title" v-else></slot>
        </div>
        <div class="body">
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="70px"
              class="demo-ruleForm"
              :size="'default'"
              status-icon
              hide-required-asterisk
              label-position="left"
          >
            <el-form-item label="新闻标题" prop="title">
              <el-input v-model="ruleForm.title" type="text"/>
            </el-form-item>
            <el-form-item label="新闻介绍" prop="desc">
              <el-input v-model="ruleForm.desc" type="textarea" rows="4"/>
            </el-form-item>
            <el-form-item label="新闻日期" prop="date">
              <el-date-picker
                  v-model="ruleForm.date"
                  type="date"
                  placeholder="请选择日期"
                  size="default"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="新闻分类" prop="category">
              <el-select v-model="ruleForm.category"
                         placeholder="请选择新闻分类"
              >
                <el-option v-for="item in selectOptions"
                           :key="item.id"
                           :label="item.label"
                           :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="预览图" prop="imgSrc">
              <upload-vue :img-src="ruleForm.imgSrc"
                          @uploadFile="uploadPreviewHandler"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">{{ baseInfo ? '更改' : '发布' }}</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import {IS_ADD, IS_EDITOR} from "@/constant";
import {ref, watch} from 'vue'
import UploadVue from '@/libs/upload'
import useUpload from '@/hook/useUploadConf';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
  },
  baseInfo: {
    type: Object,
  }
})
const emits = defineEmits(['update:modelValue', 'validateSuccess']);

const {
  rules,
  ruleForm,
  selectOptions,
  uploadPreviewHandler,
  initRuleForm,
} = useUpload();
watch(() => props.modelValue, value => {
  if (value && props.baseInfo) {
    const {title, imgSrc, desc, date, category} = props.baseInfo
    initRuleForm({title, imgSrc, desc, date, category})
  }
  if (!value) {
    setTimeout(() => {
      initRuleForm({
        title: '',
        imgSrc: '',
        desc: '',
        date: '',
        category: '',
      })
    }, 200)
  }
})

const handClick = () => {
  emits('update:modelValue', false)
}

const ruleFormRef = ref(null)

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      const {title, date, desc, imgSrc, category} = ruleForm.value
      console.log(ruleForm.value)
      emits('validateSuccess', {title, date, desc, imgSrc, category, type: props.baseInfo ? IS_EDITOR : IS_ADD});
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// const uploadPreviewHandler = async (file) => {
// 	const formData = getFormData({
// 		preview: file
// 	})
// 	const {success, url} = await uploadPreview(formData)
// 	if (!success) {
// 		console.log('预览图上传不成功!')
// 		return
// 	}
// 	ruleForm.imgSrc = url
// }
</script>

<style scoped lang="scss">
.scale-enter-active .mask,
.scale-enter-active .container {
  transition: all .32s ease-in;
}

.scale-leave-active .mask,
.scale-leave-active .container {
  transition: all .32s ease-out;
}

.scale-enter-from .mask,
.scale-leave-to .mask {
  opacity: 0;
}

.scale-enter-from .container,
.scale-leave-to .container {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8) !important;
}

.dialog-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 99;

  .mask {
    position: absolute;
    inset: 0 0 0 0;
    background: rgba(0, 0, 0, .5);
  }

  .container {
    width: 680px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 4px;

    .header {
      padding: 12px;
      font-size: 16px;

      .title {

      }
    }

    .body {
      padding: 20px;
    }

    .footer {
      padding: 0 20px 15px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
    }

    .icon {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 22px;
      cursor: pointer;
    }
  }
}
</style>